<template>
	<view class="pics">
		<scroll-view scroll-y class="leftScrollContent">
			<view :class="active === index ? 'active' : ''" v-for="(item,index) in picsMenu" :key='item.id'
				@click="reqPics(index,item.id)">
				{{item.title}}
			</view>
		</scroll-view>
		<scroll-view scroll-y class="PLR rightContent">
			<view class="" v-for="(item,i) in picsText" :key='i'>
				<image :src="pics[i]" mode="aspectFill" class="MT" @click="preView(i)"></image>
				<text>{{item.title}}</text>
			</view>
			<text v-if="picsText.length === 0" class="flex">暂无数据</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 侧边菜单数据
				picsMenu: [],
				// 当前选中了哪个
				active: 3,
				// 对应菜单的图片
				picsText: [],
				// 图片数据
				pics: [
					'https://tse3-mm.cn.bing.net/th/id/OIP-C.S2zKj-4y-JyQDG04boxtGgHaMW?w=193&h=322&c=7&r=0&o=5&pid=1.7',
					'https://tse4-mm.cn.bing.net/th/id/OIP-C.fPSbGSqopx3AtMy5_yGbLAHaMW?w=193&h=322&c=7&r=0&o=5&pid=1.7',
					'https://tse1-mm.cn.bing.net/th/id/OIP-C.fukbtDU_8mHJmsTQ2glnmwHaMW?w=193&h=322&c=7&r=0&o=5&pid=1.7',
					'https://tse1-mm.cn.bing.net/th/id/OIP-C.Dvm3wlwI982KDYQFPgcC8QHaMW?w=193&h=322&c=7&r=0&o=5&pid=1.7'
				],
				// 记录是否为重复发送请求
				reqCount:null
			}
		},
		onLoad() {
			this.reqPicsCate();
		},
		methods: {
			// 获取图片分类菜单
			async reqPicsCate() {
				const {
					data
				} = await this.$myRequest({
					url: '/api/getimgcategory'
				});
				this.picsMenu = data.message;
				this.reqPics(3,this.picsMenu[3].id);
			},
			// 请求对应图片并切换active
			async reqPics(i, id) {
				if(this.reqCount === id) return 
				this.active = i;
				this.reqCount = id;
				const {
					data
				} = await this.$myRequest({
					url: `/api/getimages/${id}`
				});
				this.picsText = data.message;
			},
			// 预览大图
			preView(i){
				uni.previewImage({
					current:i,
					urls:this.pics,
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pics {
		display: flex;
		background-color: #eee;

		.leftScrollContent {
			width: 30%;
			height: 100vh;
			border-right: 2rpx solid $themeColor;

			view {
				width: 100%;
				padding: 30rpx;
				text-align: center;
				border-bottom: 2rpx solid $themeColor;
			}
		}

		.rightContent {
			width: 70%;
			height: 100vh;
			.flex{
				height: 88%;
				font-size: 50rpx;
				color: $themeColor;
			}
			image{
				width: 100%;
				border-radius: 8rpx;
			}
		}
	}
</style>
